<template>
  <div>
    <div id="scheduleBar" style="height: 300px;" />
    <div class="schedule-table">
      <div class="schedule-row" style="background-color: rgba(6, 9, 38, 0.5);">
        <span>工序名称</span>
        <span>到达楼层</span>
        <span>完成率</span>
      </div>
      <div v-for="item in scheduleList" :key="item.name" class="schedule-row" :style="{backgroundColor: item.bgColor}">
        <span>{{ item.name }}</span>
        <span>{{ item.value ? `F${item.value}` : '' }}</span>
        <span>{{ (item.value / floorTotal * 100).toFixed(2) }}%</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'ScheduleBar',
  props: {
    floorTotal: {
      type: Number,
      default: () => 1
    },
    scheduleList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  created() { // 初始化

  },
  mounted() {},
  methods: {
    init() {
      const myChart = echarts.init(document.getElementById('scheduleBar'))
      const data = this.scheduleList
      const xAxisData = []
      const seriesData1 = []
      const sum = this.floorTotal || 1
      const barTopColor = ['#57c2b3', '#82c0ff', '#e6d7d3', '#658f9d']
      const barBottomColor = [
        'rgba(2,195,241,0.1)',
        'rgba(83, 229, 104, 0.1)',
        'rgba(161, 84, 233, 0.1)',
        'rgba(101, 143, 157, 0.1)'
      ]
      data.forEach((item) => {
        xAxisData.push(item.name)
        seriesData1.push(item.value)
      })
      const option = {
        backgroundColor: 'rgba(6, 9, 38, 0.5)',
        title: {
          show: false,
          text: '工程进度',
          top: 20,
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 20
          }
        },
        grid: {
          top: '15%',
          left: '4%',
          right: '0%',
          bottom: '20%'
        },
        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 25,
            align: 'center',
            formatter: function (params, index) {
              return (
                '{a|' +
                ((seriesData1[index] / sum) * 100).toFixed(2) +
                '%}' +
                '\n' +
                '{b|' +
                params +
                '}'
              )
            },
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              rich: {
                a: {
                  fontSize: 12,
                  color: '#ffffff'
                },
                b: {
                  height: 20,
                  fontSize: 14,
                  color: '#ffffff'
                }
              }
            }
          },
          interval: 0
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '柱顶部',
            type: 'pictorialBar',
            symbolSize: [26, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex]
                }
              }
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 16,
              color: '#ffffff',
              formatter: (params) => {
                return params.value ? `F${params.value}` : ''
              }
            },
            symbolPosition: 'end',
            data: seriesData1
          },
          {
            name: '柱底部',
            type: 'pictorialBar',
            symbolSize: [26, 10],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex]
                }
              }
            },
            data: seriesData1
          },
          {
            name: '第一圈',
            type: 'pictorialBar',
            symbolSize: [47, 16],
            symbolOffset: [0, 11],
            z: 11,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: '#3ACDC5',
                borderWidth: 2
              }
            },
            data: seriesData1
          },
          {
            name: '第二圈',
            type: 'pictorialBar',
            symbolSize: [62, 22],
            symbolOffset: [0, 17],
            z: 10,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: barTopColor[0],
                borderWidth: 2
              }
            },
            data: seriesData1
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: barTopColor[params.dataIndex]
                    },
                    {
                      offset: 0,
                      color: barBottomColor[params.dataIndex]
                    }
                  ])
                },
                opacity: 0.8
              }
            },
            z: 16,
            silent: true,
            barWidth: 26,
            barGap: '-100%', // Make series be overlap
            data: seriesData1
          }
        ]
      }
      myChart.setOption(option)
      // 显示标题，图例和空的坐标轴
      /* myChart.setOption({
        title: {
          text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: []
        }]
      })*/
      // 异步填入数据
      /* const data = {
        categories: ['衬衫', '羊毛衫'],
        data: [4, 7]
      }
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          // 根据名字对应到相应的系列
          name: '销量',
          data: data.data
        }]
      })*/
    }
  }
}
</script>

<style scoped lang='scss'>
  .schedule-table {
    margin-top: 30px;
    color: #fff;
    font-size: 14px;
    .schedule-row {
      display: flex;
      justify-content: space-around;
      height: 40px;
      line-height: 40px;
      span {
        border-left: 1px solid rgba(6, 9, 38, 0.2);
        flex: 1;
        text-align: center;
      }
    }
  }
</style>
